<template>
    <div id="todoList">
        <input v-model="content" type="text">
        <button @click="addTodo">添加</button>
        <h1>待办</h1>
        <ol>
            <!-- <todo-item v-for="item in todos" v-bind:todo="item"></todo-item> -->
            <li v-for="(item,index) in todos">
                <span :class='{hide:!item.seen}'>{{ item.text }}</span>
                <input  v-focus="!item.seen"  :class='{hide:item.seen}' v-model="updateText" @blur="send(index)" type="text">
                <button @click="goDo(index,item)">办结</button>
                <button @click="update(index,item.text)">修改</button>
            </li>
        </ol>
        <h1>已办</h1>
        <ol>
            <!-- <do-item v-for="item in dos" v-bind:olddo="item"></do-item> -->
            <li v-for="(item,index) in dos">
                <span>{{ item.text }}</span>
            </li>
        </ol>
        <div v-for="(item ,index) in userList">
          <span>{{item.name}}</span>
          <span>{{item.age}}</span>
          <button @click="deleteUser(index)">删除</button>
        </div>
    </div>
</template>
<script>
export default {
  name: "todoList",
  data() {
    return {
      title: "页面加载于 " + new Date().toLocaleString(),
      content: "",
      todos: [],
      dos: [],
      updateText: "",
      userList:[]
    };
  },
  methods: {
    initData:function(){
      this.userList = this.list;
    },
    addTodo: function() {
      this.todos.push({
        text: this.content,
        seen: true
      });
      this.content = "";
      console.log(this.todos)
    },
    goDo: function(index, item) {
      this.todos.splice(index, 1);
      this.dos.push(item);
      console.log(item, this.dos);
    },
    update: function(index, text) {
      this.updateText = text;
      this.todos[index].seen = false;
      console.log(this.todos)
    },
    send: function(index) {
      this.todos.splice(index, 1,{
        text:this.updateText,
        seen:true
      });
      // this.todos[index].text = this.updateText;
      // this.todos[index].seen = true;
      console.log(this.todos);
    },
    deleteUser:function(index){
      this.userList.splice(index, 1);
    }
  },
  created: function() {
    this.initData();
  },
  props:{
    list:{
      type:Array
    }
  },
  directives: {
    // 自定义指令
    focus: {
      update: function(el, { value }) {
        if (value) {
          el.focus();
        }
      }
    }
  }
};
</script>

<style>
.active {
  color: red;
}

.hide {
  display: none;
}

.a {
  width: 100%;
  background: red;
  background-size: 100%;
}
.b {
  width: 80%;
  margin-left: 10%;
}
</style>

